<template>
	<div>
		<div class="jiben" v-loading="loading">
			<div class="jiben_top">
				<div class="jiben_tilel">基本信息</div>
				<div class="jiben_btn_box">
					<el-button 
						class="btn_item"
						v-if="allAuth.lawcase.update"
						@click="handleAction({'type':'update'})">修改</el-button>
					<el-button 
						class="btn_item"
						v-if="allAuth.lawcase.delete"
						@click="handleAction({'type':'delete'})">删除</el-button>
					<el-button 
						class="btn_item"
						@click="back()">返回</el-button>
				</div>
			</div>
			<div style="margin-top: 10px;">
				<table
					class="table table-hover">
					<tbody>
						<tr 
							v-for="(item,index) in list"
							:key="index">
							<td class="tdleft" width="15%">{{item[0].name}}</td>
							<template v-if="item.length > 1">
								<td width="35%">
									<span v-if="item[0].form_type == 'user' || item[0].form_type == 'user-multiple'">
										<template v-if="item[0].value.length">
											<template
												v-for="(i,k) in item[0].value">
												{{i.username ? i.username :'--'}}
											</template>
										</template>
										<template v-else> --- </template>
									</span>
									<span v-else-if="item[0].field == 'customer'">
										<el-link type="primary" @click="showSetmeal(item[0].value)">
											{{item[0].value.name}}
										</el-link>
									</span>
									<span v-else>
										{{item[0].value ? item[0].value : '---'}}
									</span>
								</td>
								<td class="tdleft" width="15%">{{item[1]? item[1].name :''}}</td>
								<td width="35%">
									<span v-if="item[1].form_type == 'user' || item[1].form_type == 'user-multiple'">
										<template v-if="item[1].value.length">
											<template
												v-for="(i,k) in item[1].value">
												{{i.username ? i.username :'--'}}
											</template>
										</template>
										<template v-else> --- </template>
									</span>
									<span v-else-if="item[1].field == 'customer'">
										<el-link type="primary" @click="showSetmeal(item[1].value)">
											{{item[1].value.name}}
										</el-link>
									</span>
									<span v-else>
										{{item[1].value ? item[1].value : '---'}}
									</span>
								</td>
							</template>
							<template v-else>
								<td colspan="3" class="colspan3">
									<span v-if="item[0].form_type == 'file'">
										<span 
											v-if="item[0].value.length > 0"
											v-for="(v,k) in item[0].value"
											:key="k">
											<!-- <a :href="v.file_path" style="display: block;" target="_blank">{{v.name}}</a> -->
											<a
												v-if="v.file_type == 'image'"
												@click="previewImg(item[0].value, k)"
												href="javascript:void(0);"
												style="display: block;">{{v.name}}</a>
											<a
												v-else-if="v.file_type == 'viewfile'"
												:href="v.file_path"
												target="_blank"
												style="display: block;">{{v.name}}</a>
											<a
												v-else
												:href="'https://view.officeapps.live.com/op/view.aspx?src='+v.file_path"
												target="_blank"
												style="display: block;">{{v.name}}</a>
										</span>
										<span v-else>
											---
										</span>
									</span>
									<span v-else>
										{{item[0].value}}
									</span>
								</td>
							</template>
						</tr>
					</tbody>
				</table>
			</div>
			<div style="margin-top: 10px;">
				<!-- 结案/归档信息 -->
				<sections
					class="b-cells" 
					title="结案/归档记录" 
					m-color="#46CDCF" 
					content-height="auto"
					:show-save="false">
					<flexbox
						:gutter="0" 
						wrap="wrap" 
						style="padding:10px 8px;margin-top:5px">
						<el-table
							class="table table-hover"
							:data="closeList"
							stripe
							border
							:header-cell-style="{'background-color':'#f6faff'}"
							style="width: 100%">
							<el-table-column prop="status" label="状态" width="200"></el-table-column>
							<el-table-column prop="close_time" label="结案/归档时间" width="200"></el-table-column>
							<el-table-column prop="close_number" label="归档编号"></el-table-column>
							<el-table-column label="承办助理">
								<template slot-scope="scope">
									<span v-for="(i,k) in scope.row.assistant_user_id" :key="k">
										{{i.username}}
									</span>
								</template>
							</el-table-column>
							<el-table-column prop="close_user_id[0].username" label="操作人"></el-table-column>
							<!-- <el-table-column prop="create_time" label="操作时间"></el-table-column> -->
						</el-table>
					</flexbox>
				</sections>
			</div>
		</div>
		<!-- dialog弹窗 -->
		<dialog-form
			:dialog-visible="dialogForm"
			:title="title"
			ref="crmform"  
			:crm-type="crmType"
			:fields-data = "fieldsData"
			:action="action"
			:form-data="formData"
			@close = "closeDialog"
			@save-dialog="saveDialog">
		</dialog-form>
		
		<!-- 员工 -->
		<relate-empoyee 
			:visible.sync="transferDialogShow" 
			:type="type"
			:radio="radio"
			title="请选择员工"
			@save="employeesSave" />
	</div>
</template>

<script>// API
	import { filedGetField } from '@/api/setting/setting'
	import { mapGetters } from 'vuex'
	import Sections from '../../customer/Sections'
	import DialogForm from '@/components/FromData/dialogForm'
	// 员工组件
	import RelateEmpoyee from '@/views/setting/auth/components/relateEmpoyee'
	import {
		crmLawcaseUpdate,
		crmLawcaseDelete
	} from '@/api/lawcase/lawcase'
	export default {
		components: {
			Sections,
			DialogForm,
			RelateEmpoyee
		},
		data() {
			return {
				loading:false,
				list:[],
				// 联系人信息
				closeList:[],
				
				// dialog弹窗
				dialogForm:false,
				title:"",
				dialogType:"",
				fieldsData:[],
				action:{ type: '',relevant:'' },
				formData:{},
				
				// 员工
				transferDialogShow:false,
				type:'',
				radio:true
			}
		},
		props: {
			crmType: {
				type: String,
				default: ''
			},
			detail: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		mounted() {
			this.getBaseInfo()
			
		},
		computed: {
			...mapGetters(['allAuth']),
		},
		methods: {
			// 获取基础信息
			getBaseInfo() {
				this.loading = true
				filedGetField({
						types: 'crm_'+this.crmType,
						module: 'crm',
						controller: this.crmType,
						action: 'read',
						action_id: this.$route.params.id
					})
					.then(res => {
						let arr = this.setNewData(res.data.baseinfo)
						
						this.loading = false
						
						this.list = JSON.parse(JSON.stringify(arr))
						this.closeList = JSON.parse(JSON.stringify(res.data.close))
					})
					.catch(() => {
						this.loading = false
					})
			},
			
			
			
			// 组合数据
			setNewData(res){
				if(res == undefined || res.length <= 0) return []
				let listArr = res
				let one_arr = []
				let two_arr = []
				// 提取数组单元素
				for(var i=0;i<listArr.length;i++){
				    if(!listArr[i].isrows){
						one_arr.push(listArr[i])
					}else{
						two_arr.push([listArr[i]])
					}
				}
				let new_one_arr= [];
				for(var i=0;i<one_arr.length;i+=2){
				    new_one_arr.push(one_arr.slice(i,i+2));
				}
				let arr = new_one_arr.concat(two_arr)
				// console.log(arr);
				return arr
			},
			
			
			// 添加信息
			handleAction(item){
				let actiontype = ''
				switch (item.type){
					case "update":
						this.title = "修改信息"
						this.dialogForm = true
						let relevant
						let detail = this.detail
						if(detail.type == '非诉咨询'){
							relevant = 'zixun'
							actiontype = '13'
							detail["feisu_status"] = detail["status"];
						}else if(detail.type == '非诉服务'){
							relevant = 'fuwu'
							actiontype = '14'
							detail["feisu_status"] = detail["status"];
						}else if(detail.type == '诉讼案件'){
							relevant = 'susong'
							actiontype = '15'
							detail["susong_status"] = detail["status"];
						}else if(detail.type == '刑事案件'){
							relevant = 'xingshi'
							actiontype = '16'
							detail["xingshi_status"] = detail["status"];
						}
						detail["jieduan"] = Array.isArray(detail["jieduan"]) ? detail["jieduan"] : detail["jieduan"].split(",");
						this.action={ type: 'update',relevant:relevant,actiontype:actiontype }
						this.formData = JSON.parse(JSON.stringify(detail))
						break;
						
					case "delete":
						this.delInfo({"type":item.type})
						break;
							
					default:
						break;
				}
			},
			
			delInfo(item){
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					crmLawcaseDelete({
						id: [this.$route.params.id]
					})
					.then(res => {
						this.$message.success(res.data)
						this.$router.push({path:"/lawcase/index"}) 
					})
					.catch(() => {})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
			},
			
			// 弹窗操作
			closeDialog(){
				this.title = ""
				this.dialogForm = false
				this.formData = {}
			},
			
			// 保存操作
			saveDialog(item){
				let request
				if(item.type=="update_zixun" || item.type=="update_fuwu"|| item.type=="update_susong" ||item.type=="update_xingshi"){
					request = crmLawcaseUpdate
				}
				request(item.data)
					.then(res => {
						this.$message.success(res.data)
						this.closeDialog()
						this.getBaseInfo()
						this.$emit("handle",{"type":item.type})
					})
					.catch(() => {})
			},
			
			/**
			 * 员工
			 */
			employeesSave(val) {
				if(!val.type) return
				let request
				let owner_user_id
				if (val.type == 'save_team') {
					request = crmCustomerTeamSave
					owner_user_id = val.users[0].id
				}
				
				request({
						id: this.$route.params.id,
						owner_user_id: owner_user_id
					})
					.then(res => {
						this.$message.success(res.data)
						this.transferDialogShow = false
						this.getBaseInfo()
					})
					.catch(() => {})
				
			},
			
			
			// 返回
			back(){
				this.$router.back()
			},
			
			// 显示
			showSetmeal(item){
				this.$router.push({
					path:"/customer/read/"+item.id
				}) 
			},
			
			// 预览图片
			previewImg(list, index) {
				this.$bus.emit('preview-image-bus', {
					index: index,
					// data:[{"url":item.file_path,"name":item.name}]
					data: list.map(function(item, index, array) {
						item.url = item.file_path
						return item
					})
				})
			},
		},
	}
</script>

<style scoped>
	.jiben_btn_box {
		display: flex;
	}
	
	.btn_item {
		margin: 0 5px;
		color: #fff;
		background-color: #b5060d;
		font-size: 12px;
		padding: 10px 10px;
	}
	
	.jiben_tilel {
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: 600;
		margin-left: 10px;
	}
	
	.jiben_top {
		height: 50px;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
	}
	
	.jiben {
		padding: 10px;
		background-color: #fff;
		font-size: 14px;
	}
	.table{
		width: 100%;
		font-size: 13px !important;
	}
	
	.table td {
		vertical-align: middle;
		/* padding: 15px 10px; */
		line-height: 19px;
		border: 1px solid #EEEEEE;
		white-space: pre-wrap;
		word-break: break-all;
	}
	.table td.tdleft {
		text-align: center;
		background: #f6faff;
	}
	.table tr:hover {
		background: #f6faff;
	}
	.colspan3{
		line-height: 25px !important;
	}
</style>